<template>
  <div class="main" >
    <!-- 概况页面 -->
    <div class="mainLeft">
      <div class="picBox">
        <div class="welcomeInfo">
          <span class="name">hello！{{ userName }}</span>
          <span class="text">欢迎来到同城货运管理系统，祝你每一天都有新的收获哦！</span>
        </div>
      </div>
      <!-- 快捷入口 -->
      <div class="title_box">
        <div class="title before">快捷入口</div>
      </div>
      <div class="shortcut">
        <div class="shortcut_item" v-for="item in shortcutArr" :key="item.title">
          <div class="shortcut_item_btn" @click="goToRoute(item, item.activeName)">
            <div class="iconfont_color2  iconStyle" :class="item.icon != null ? item.icon : ''">
              <div class="badge" v-if="item.infoNum != undefined && item.infoNum != '0'">
                <span class="badgeText">{{ item.infoNum > 99 ? '99' : item.infoNum }}</span>
              </div>
            </div>
            <span>{{ item.title }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="mainRight">
      <div class="timeBox">
        <div class="dateTimeBox">
          <span class="hour">{{ time }}</span>
          <span class="date">{{ date }} 星期{{ week }}</span>
        </div>
      </div>
      <div class="noticeBox">
        <div class="noticeTitle before">通知</div>
        <ul class="list">
          <li class="message" v-for="item in noticData" :key="item.messageId">
            <div class="messageTitle">{{ item.headline }}</div>
            <div class="yearMonth">{{ item.createTime }}</div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import httpApi from '@/http';
export default {
  data() {
    return {
      shortcutArr: [{
        icon: "icon-daitiaodudingdan",
        title: "待调度订单",
       infoNum: "0",
        link: "/home/carrierOrder/list",
      }, {
        icon: "icon-chengyunhetong",
        title: "承运合同",
        infoNum: "0",
        link: "/home/contractManagement/List",
      }, {
        icon: "icon-chengyunshoukuandan",
        title: "承运收款单",
        infoNum: "0",
        link: "/home/carrierSettlement/list",
        //activeName:'first'
      }, {
        icon: "icon-chengyunfukuandan",
        title: "承运付款单",
        infoNum: "0",
        link: "/home/carrierSettlement/list",
        activeName: 'second'
      }, {
        icon: "icon-daishenheyundan",
        title: "待审核自营运单",
        infoNum: "0",
        link: "/home/selfOperatedWaybill/list",
      }, {
        icon: "icon-ziyingshoukuandan",
        title: "自营收款单",
        infoNum: "0",
        link: "/home/selfOperatedSettlement/list", //1
        //activeName:'first'
      }, {
        icon: "icon-ziyingfukuandan",
        title: "自营付款单",
        infoNum: "0",
        link: "/home/selfOperatedSettlement/list",  //2
        activeName: 'second'
      }, {
        icon: "icon-chuangjiandingdan2",
        title: "创建订单",
        link: "/home/selfOperatedOrder/selfCreatedOrder",
      }, {
        icon: "icon-piliangjiandan",
        title: "批量建单",
        link: "/home/selfOperatedOrder/batchCreatedOrder",
      }, {
        icon: "icon-xinzenghuoyunfang",
        title: "新增货源方",
        link: "/home/selfOperatedSettings/settingsManagement",  //新增货源方
      }, {
        icon: "icon-xinzengcheliang",
        title: "新增车辆",
        link: "/home/vehicle/list",   //新增车辆
      }, {
        icon: "icon-cheduiguanli",
        title: "车队管理",
        link: "/home/fleetManagement/list",
      }, {
        icon: "icon-ziyingdingdanchaxun",
        title: "自营订单查询",
        link: "/home/selfOperatedOrder/List",
      }, {
        icon: "icon-ziyingyundanchaxun",
        title: "自营运单查询",
        link: "/home/selfOperatedWaybill/list",
      }],
      date: "", //日期
      time: "", //小时:分钟
      week: "", //星期
      userName: '',//用户名

      noticData:[],
    };
  },
  methods: {
    getDate() {
      // 项目安装了moment时间组件库 https://moment.nodejs.cn/docs/#/parsing/date/
      // js中写var moment = require('moment'); 然后调用moment中的方法

      const _this = this;
      var moment = require("moment");

      function getDateFn() {
        var week = moment().format("E");
        var weekArr = ["日", "一", "二", "三", "四", "五", "六"];
        var weekStr = weekArr.filter((str, index) => {
          return index == week ? weekArr[index] : "";
        });
        _this.week = weekStr[0];
        var date = moment().format("YYYY年MM月DD日");
        var time = moment().format("HH:mm");
        _this.date = date;
        _this.time = time;
        return getDateFn;
      }
      setInterval(getDateFn(), 1000); //立即执行一次,随和每隔一秒执行一次
    },
    init() {
      httpApi.loginApi.getUserInfo().then(res => {
        ////console.log('用户信息',res);
        this.userName = res.data.data.userName
      })
    },
    goToRoute(item, activeName) {
      //console.log(activeName);
      if (activeName == undefined) {
        this.$router.push(item.link)
      } else if (activeName != null) {
        this.$router.push({ path: item.link, query: { 'active': item.activeName } })
      }
    },
    async cread(){
      let res = await this.$http.loginApi.indexNumber()
      let data = res.data.data
      //console.log(data) 
      // shortcutArr
      data.forEach((item,i) => {
        if(i==0){
          this.shortcutArr[i].infoNum=item.number
        }else{
          this.shortcutArr[i+1].infoNum=item.number
        }
        
      });
      this.shortcutArr = JSON.parse(JSON.stringify(this.shortcutArr))
    },
    getMessage(){
      let params={
        port_type:"supplier",
      }
        httpApi.loginApi.getMessageNotice(params).then(res=>{
          //console.log(res)
          if(res.data.code==200){
            res.data.data.forEach(item=>{
              item.createTime=item.createTime.slice(0,10)
            })
            //console.log(res.data.data)
            this.noticData=res.data.data
          }
        })
    }
  },
  mounted() {
    this.getDate();
    this.init()
    this.cread()
    this.getMessage()
  },
};
</script>

<style lang="scss" scoped>
.main {
  display: flex;
  justify-content: space-between;

  .mainLeft {
    flex: 1;
    height: 590.8px;
    background-color: #fff;
    margin-right: 20px;
    padding: 20px 30px;
    min-width: 520px;

    .shortcut {
      display: flex;
      width: 100%;
      flex-wrap: wrap;

      .shortcut_item {
        width: calc(100% / 7);
        display: flex;
        align-items: center;
        height: 141.5px;

        justify-content: center;

        >.shortcut_item_btn {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 88px;
          height: 88px;
          cursor: pointer;

          &:hover {
            background-color: #eaf5fd;
            transition: 0.3s;
          }

          >.iconStyle {
            margin-bottom: 9px;
            font-size: 43px;
            position: relative;

            .badge {
              background-color: #F5222D;
              width: 18px;
              height: 18px;
              border-radius: 50%;
              display: flex;
              justify-content: center;
              align-items: center;
              position: absolute;
              right: -9px;
              top: -9px;

              .badgeText {
                color: #fff;
                font-size: 20px;
                transform: scale(0.5);
              }

            }
          }

          >span {
            color: #262626;
            font-size: 12px;
          }
        }
      }
    }

    >.picBox {
      height: 200px;
      width: 100%;
      background-image: url("@/assets/img/welcome@2x.png");
      background-size: 100% 200px;
      background-repeat: no-repeat;
      display: flex;
      align-items: center;

      >.welcomeInfo {
        display: flex;
        flex-direction: column;
        margin-left: 40px;

        .name {
          font-size: 24px;
          color: #fff;
          margin-bottom: 13px;
        }

        .text {
          font-size: 14px;
          color: #fff;
        }
      }
    }

    .title_box {
      height: 42px;
      width: 100%;
      border-bottom: 1px solid #f0f0f0;
      line-height: 42px;
      margin-top: 35px;

      .title {
        font-size: 14px;
        font-weight: bold;
        color: #262626;
        height: 42px;

        &.before::before {
          content: " ";
          width: 3px;
          display: inline-block;
          height: 16px;
          background-color: #1890ff;
          margin-right: 8px;
          position: relative;
          top: 3px;
        }
      }
    }
  }

  .mainRight {
    width: 285px;
    height: 590.8px;

    >.timeBox {
      width: 285px;
      height: 177px;
      background-color: #fff;
      margin-bottom: 18px;
      display: flex;
      justify-content: center;
      align-items: center;

      >.dateTimeBox {
        display: flex;
        flex-direction: column;
        align-items: center;

        >.hour {
          color: #1890ff;
          font-size: 60px;
          font-weight: bold;
        }

        >.date {
          color: #262626;
          font-size: 14px;
          font-weight: 600;
        }
      }
    }

    >.noticeBox {
      width: 285px;
      height: 395.8px;
      background-color: #fff;
      padding: 18px 31px 42px;

      >.noticeTitle {
        height: 42px;
        width: 100%;
        border-bottom: 1px solid #f0f0f0;
        line-height: 42px;
        font-size: 14px;
        font-weight: bold;
        color: #262626;

        &.before::before {
          content: " ";
          width: 3px;
          display: inline-block;
          height: 16px;
          background-color: #1890ff;
          margin-right: 8px;
          position: relative;
          top: 3px;
        }
      }

      >.list {
        margin-top: 12.5px;
        width: 223px;
        display: flex;
        flex-direction: column;
        height: 280px;

        >.message {
          width: 223px;
          display: flex;
          justify-content: space-between;
          cursor: pointer;
          transition: 0.2s;
          &:hover{
            opacity: 0.8;
            background-color: #f5f5f5;
          }


          >.messageTitle {
            color: #262626;
            font-size: 12px;
            width: 129px;
            height: 28px;
            line-height: 28px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }

          >.yearMonth {
            color: #C3C3C3;
            font-size: 12px;
            line-height: 28px;
          }
        }
      }
    }
  }
}</style>
